<template>
	<view class="mymianbox">
		<qi_navigation />
		<scroll-view scroll-y class="scroll">
			<view class="mianbox">
				<view>
					<image :src="store.state.vuex_user.avatar_url"></image>
				</view>
				<view class="mytext">
					<text>{{ store.state.vuex_user.name }}</text>
					<text>{{ store.state.vuex_user.email }}</text>
				</view>
			</view>
			<view class="personal" @tap="tapsubinfo">
				<view class="iconfont icon-31wode">
					<text>个人信息</text>
				</view>
				<text class="iconfont icon-icon-test61"></text>
			</view>
			<!--  -->
			<view class="percenter">
				<view v-for="(item, i) in data.myperlist" :key="i" class="pergoodslist" @tap="Tapclicksubper(i)">
					<view class="iconfont " :class="item.icon">
						<text>{{ item.text }}</text>
					</view>
					<text class="iconfont icon-icon-test61"></text>
				</view>
			</view>
			<!--  -->
			<view class="logout" @tap="subout">
				<view class="iconfont icon-icon-test35">
					<text>退出登陆</text>
				</view>
				<text class="iconfont icon-icon-test61"></text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		deltlogout
	} from '@/http/api.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		reactive,
		toRefs,
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		useStore
	} from 'vuex'; // 引入useStore 方法
	const store = useStore(); // 该方法用于返回store 实例
	const {
		proxy
	} = getCurrentInstance();
	const data = reactive({
		userdata: '',
		myperlist: [{
				icon: 'icon-icon-test56',
				text: '收藏'
			},
			{
				icon: 'icon-daishouhuo',
				text: '收货地址'
			},
			{
				icon: 'icon-icon-test8',
				text: '订单列表'
			}
		]
	});
	onMounted(() => {
		proxy.islogin.islogin();
		data.userdata = store.state.vuex_user;
		console.log(store.state);
	});
	const tapsubinfo = () => {
		uni.navigateTo({
			url: '/pages/my/childer/userinfo'
		});
	};
	const Tapclicksubper = i => {
		console.log(i);
		switch (i) {
			case 0:
				uni.navigateTo({
					url: '/pages/my/childer/collect/collect'
				});
				break;
			case 1:
				uni.navigateTo({
					url: '/pages/my/childer/address/address'
				});
				break;
			case 2:
				uni.navigateTo({
					url: '/pages/my/childer/myorders/myorders'
				});
				break;
		}
	};
	const subout = () => {
		store.commit('userInfo', '');
		uni.showToast({
			title: '退出成功	',
		});
		uni.redirectTo({
			url: '/pages/my/login/login'
		});
	};
</script>

<style lang="scss">
	.mymianbox {
		.scroll {
			height: calc(100vh - 50px - var(--window-bottom));
			// #ifndef H5 
			// height: calc(100vh - 50px - var(--window-bottom) - 20px);
			// #endif
		}

		.mianbox {
			display: flex;
			background-color: #fff;
			height: 120px;
			align-items: center;

			image {
				width: 80px;
				height: 80px;
				border-radius: 90px;
				margin: 20px 10px;
			}

			.mytext {
				display: flex;

				flex-direction: column;
				height: 80px;
				justify-content: space-around;
			}
		}

		.personal {
			display: flex;
			margin: 10px 0;
			background-color: #fff;
			height: 70px;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;

			text {
				padding-left: 10px;
			}
		}

		.percenter {

			// display: flex;
			.pergoodslist {
				position: relative;
				padding: 0 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				height: 70px;

				text {
					padding-left: 10px;
				}

				:after {
					content: '';
					height: 1px; //控制边框宽度
					width: 200%; //控制边框长度
					position: absolute;
					left: 0px;
					top: auto;
					right: auto;
					bottom: 0px;
					background-color: #eeeeee;
					border: 0px solid transparent;
					border-radius: 0px;
					-webkit-border-radius: 0px;
					transform: scale(0.5); //缩放宽度，达到0.5px的效果
					-webkit-transform: scale(0.5);
					-moz-transform: scale(0.5);
					-ms-transform: scale(0.5);
					-o-transform: scale(0.5);
					transform-origin: top left; //定义缩放基点
					-webkit-transform-origin: top left;
					-moz-transform-origin: top left;
					-ms-transform-origin: top left;
					-o-transform-origin: top left;
				}
			}
		}

		.logout {
			margin-top: 20px;
			background-color: coral;
			height: 70px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;

			text {
				padding-left: 10px;
			}
		}
	}
</style>